import { AppStore, PagingInfo } from './../../services/appStore';
import { Observable } from 'rxjs';
import { OrderSvr } from './../../services/order';

import { OrderPanel } from './orderPanel';
import { Component, Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'panel-tabs',
    styleUrls: ['./home.component.scss'],
    template: `
    <div class='tabs-container layout-row pct-h100 layout-align-center' >
        <div class="arrow left layout-column  layout-align-center-center" (click)="previous()">{{pagingInfo.count.previous}}<</div>
         <div class="tabs flex layout-row layout-align-space-around-center" >
             <span class="tab" *ngFor="let order of pagingInfo.orders;let i = index;trackBy:trackByOrderId" [hidden]="pagingInfo&&(i<pagingInfo.count.previous || i>=(pagingInfo.orders.length - pagingInfo.count.next))">
                 {{order.terminalName}} || {{order.customerIdentity}}
             </span>
         </div>
        <div class="arrow right layout-column  layout-align-center-center" (click)="next()">>{{pagingInfo.count.next}}</div>
         <div (click)="addOrder()">加order</div>
    </div>
  `
})

export class PanelTabs {
    @Input() pagingInfo: PagingInfo;
    constructor(private element: ElementRef, private appStore: AppStore) {

    }
    private trackByOrderId(index: number, order: any) {
        return order.id;
    }
}
